<template>
  <Pannel navbar>
    <view class="zbhd-box">
      <image class="bg" :src="bgImg"></image>

      <view class="card-box">
        <CardBox width="686rpx">
          <template v-slot:header>
            <view class="header">
              <view class="header-left">7月</view>
              <view class="header-right">
                <view class="text">活动总数</view>
                <view class="num">4</view>
              </view>
            </view>
          </template>

          <view class="list">
            <view class="item">
              <view class="item-header">
                <view class="text">姓名</view>
                <view class="num">王文文</view>
              </view>
              <view class="msg">
                <view class="text">参加活动得分</view>
                <view class="num">4</view>
              </view>
              <view class="msg">
                <view class="text">参加活动次数</view>
                <view class="num">4</view>
              </view>
            </view>
            <view class="item">
              <view class="item-header">
                <view class="text">姓名</view>
                <view class="num">王文文</view>
              </view>
              <view class="msg">
                <view class="text">参加活动得分</view>
                <view class="num">4</view>
              </view>
              <view class="msg">
                <view class="text">参加活动次数</view>
                <view class="num">4</view>
              </view>
            </view>
          </view>
        </CardBox>
      </view>
    </view>
  </Pannel>
</template>

<script>
import bg from '@/utils/base64/zbhd/bg.js';
import Pannel from '../../components/Pannel/Pannel.vue';
import CardBox from '../../components/CardBox/CardBox.vue'

export default {
  name: 'zbhd',
  components: {
    Pannel,
    CardBox
  },
  data() {
    return {
    }
  },
  computed: {
    bgImg() {
      return bg;
    },
    navBackStyle() {
      return {
        top: this.top,
        width: this.height,
        height: this.height
      }
    }
  },
  methods: {
    onBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.zbhd-box {
  position: relative;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100vw;
  padding: 0 32rpx 0;
  box-sizing: border-box;
  overflow: hidden;

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 360rpx;
    z-index: 0;
  }

  .card-box {
    margin-top: 360rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      height: 40px;
      background: #fff0d7;
      box-sizing: border-box;

      .header-left {
        font-size: 14px;
        color: #71411b;
        font-weight: 600;
      }

      .header-right {
        display: flex;

        .text {
          font-size: 14px;
          color: #71411b;
          font-weight: 600;
        }

        .num {
          margin-left: 10rpx;
          font-size: 14px;
          color: #71411b;
          font-weight: 600;
        }

      }
    }

    .list {
      margin-top: -24rpx;

      .item {
        padding: 20rpx 0;
        border-bottom: 1px dashed rgba(178, 163, 142, 0.15);
        box-sizing: border-box;

        .item-header {
          display: flex;
          justify-content: space-between;

          .text {
            font-size: 14px;
            color: #333333;
            font-weight: 600;
          }

          .num {
            font-size: 14px;
            color: #333333;
            font-weight: 600;
          }
        }

        .msg {
          display: flex;
          justify-content: space-between;
          margin-top: 20rpx;
        }
      }
    }
  }
}
</style>